<template>
	<view class="user" :class="[isDark?'dark':'', $store.state.AppStyle]" :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<!-- 分类页面专用布局 -->
		<block v-if="type=='meta'||type=='tag'">
			<!-- 分类背景头部 -->
			<view class="category-header" :style="{backgroundImage: 'url(' + (metaInfo.imgurl) + ')'}">
				<view class="category-header-overlay">
					<view class="header-nav" :style="{'padding-top':StatusBar + 'px', 'height': CustomBar + 'px'}">
						<view class="nav-action" @tap="back">
							<text class="cuIcon-back"></text>
						</view>
						<view class="nav-title-meta"><text v-if="type=='tag'">#</text>{{metaInfo.name}}</view>
						<view class="nav-action" @tap="toSearch">
							<text class="cuIcon-search"></text>
						</view>
					</view>
					<view class="category-info">
						<view class="category-name"><text v-if="type=='tag'">#</text>{{metaInfo.name}}</view>
						<view class="category-description">{{metaInfo.description || $t('global.nodesc')}}</view>
						
					</view>
				</view>
			</view>
			
			<!-- 筛选选项卡 -->
			<view class="filter-tabs-container">
				<scroll-view scroll-x class="filter-tabs" scroll-with-animation>
					<view class="tn-tabs__item" 
						v-for="(item, index) in filterList" 
						:key="index"
						:class="{'tn-tabs__item--active': orderCur === item.order}"
						@tap="topSelect" 
						:data-order="item.order">
						<text class="tn-tabs__item-title">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			
			<!-- 文章列表 -->
			<view class="content-list-container">
				<block v-for="(item,index) in contentsList" :key="index" v-if="actStyle==1">
					<articleItemA :item="item"></articleItemA>
				</block>
				<block v-for="(item,index) in contentsList" :key="index" v-if="actStyle==2">
					<articleItemB :item="item"></articleItemB>
				</block>
			</view>
		</block>
		
		<!-- 其他页面布局 -->
		<block v-else>
			<view class="header" :style="[{height:CustomBar + 'px'}]">
				<view class="cu-bar" :class="isDark?'dark':'bg-white'" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px','background-color':isDark?'#1c1c1c':'#ffffff'}">
					<view class="action" @tap="back">
						<text class="cuIcon-back"></text>
					</view>
					<view class="content text-bold" :style="[{top:StatusBar + 'px'}]">
						{{$title}}
					</view>
					<!--  #ifdef H5 || APP-PLUS -->
					<view class="action" @tap="toSearch">
						<text class="cuIcon-search"></text>
					</view>
					<!--  #endif -->
				</view>
			</view>
			<view :style="[{padding:NavBar + 'px 10px 0px 10px'}]"></view>
			<scroll-view scroll-x class="nav metaList" :class="isDark?'dark':'bg-white'" :style="{'background-color':isDark?'#1c1c1c':'#ffffff'}" scroll-with-animation :scroll-left="scrollLeft" style="margin-top: 20upx;" v-if="type=='all'">
				<view class="cu-item" :class="item.mid==TabCur?'text-blue cur':''" v-for="(item,index) in metaList" :key="index" @tap="tabSelect" :data-id="item.mid" v-if="item.parent==0">
					{{item.name}}
				</view>
			</scroll-view>
			
			<view class="cu-card article no-card">
			<scroll-view scroll-x class="nav metaList" :class="isDark?'dark':'bg-white'" :style="{'background-color':isDark?'#1c1c1c':'#ffffff'}" scroll-with-animation :scroll-left="scrollLeft" style="margin-top: 20upx;" v-if="type=='top'">
				<view class="cu-item" :class="item.order==orderCur?'text-blue cur':''" v-for="(item,index) in topList" :key="index" @tap="topSelect" :data-order="item.order">
					{{item.name}}
				</view>
			</scroll-view>
			</view>
			<view class="padding-left-sm padding-right-sm" :class="isDark?'dark':'bg-white'" :style="{'background-color':isDark?'#1c1c1c':'#ffffff'}">
			
			<block v-for="(item,index) in contentsList" :key="index" v-if="actStyle==1">
				<articleItemA :item="item"></articleItemA>
			</block>
			<block v-for="(item,index) in contentsList" :key="index" v-if="actStyle==2">
				<articleItemB :item="item"></articleItemB>
			</block>
			</view>
		</block>
		<view class="load-more" @tap="loadMore" v-if="contentsList.length>0">
			<text>{{moreText}}</text>
		</view>
		
		<view class="no-data" v-if="contentsList.length==0">
			<text class="cuIcon-text"></text>{{$t('common.nodata')}}
		</view>
		<view v-if="scrollTop>40" class="forum-post-btn-1 tn-main-gradient-blue box-shadow-1" @tap="totop()">
			<text class="tn-icon-totop"></text>
		</view>
		
		
		

		<!--加载遮罩-->
		<view class="loading" v-if="isLoading==0">
			<view class="loading-main">
				<image src="../../static/loading.gif"></image>
			</view>
		</view>
		<!--加载遮罩结束-->
	</view>
</template>

<script>
	import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar:this.StatusBar +  this.CustomBar,
				AppStyle:this.$store.state.AppStyle,
				scrollTop: 0,
				title:"",
				type:"",
				id:0,
				
				contentsList:[],
				page:1,
				moreText:$t('common.loadmoretxt'),
				
				isLoad:0,
				metaInfo:{},
				metaList:[
					{
						mid:0,
						name:$t('global.all'),
						parent:0
					}
				],
				topList:[
					{
						order:"replyTime",
						name:$t('global.reply'),
						parent:0
					},
					{
						order:"commentsNum",
						name: $t('content.contentlist.strong'),
						parent:0
					},
					{
						order:"views",
						name:$t('global.hot'),
						parent:0
					},
					{
						order:"likes",
						name:$t('global.like'),
						parent:0
					},
					{
						order:"created",
						name:$t('global.uptodate'),
						parent:0
					}
					
				],
				filterList:[
					{
						order: "created",
						name: $t('global.uptodate'),
						parent: 0
					},
					{
						order: "views",
						name: $t('global.hot'), 
						parent: 0
					},
					{
						order: "commentsNum", 
						name: $t('content.contentlist.rated'),
						parent: 0
					},
					{
						order: "likes",
						name: $t('global.like'),
						parent: 0
					}
				],
				actStyle: 0,
				orderCur:"created",
				TabCur: 0,
				scrollLeft: 0,
				isLoading:0,
				isvip:0
			}
		},
		onPageScroll(res) {
			var that = this;
			that.scrollTop = res.scrollTop;
		},
		onPullDownRefresh(){
			
		},
		onReachBottom() {
		    //触底后执行的方法，比如无限加载之类的
			var that = this;
			if(that.isLoad==0){
				that.loadMore();
			}
		},
		onShow(){
			var that = this;
			that.getSet();
			// #ifdef APP-PLUS
			//plus.navigator.setStatusBarStyle("dark")
			// #endif
		},
		onLoad(res) {
			var that = this;
			if(localStorage.getItem('userinfo')){
				var userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.isvip = userInfo.isvip;
			}
			// #ifdef APP-PLUS || MP
			that.NavBar = that.CustomBar;
			// #endif
			that.title = res.title;
			that.type =  res.type;
			//user根据用户查询 meta根据分类和标签查询，all显示分类查询全部，search根据搜索关键词查询
			that.id =  res.id;
			if(res.type!=""){
				if(that.type=="meta"){
					that.getMetaInfo(that.id);
					that.getMetaContents(false,that.id);
				}else if(that.type=="tag"){
					that.getMetaInfo(that.id);
					that.getMetaContents(false,that.id);

				}else if(that.type=="top"){
					that.getContentsList(false,that.type,that.id);
				}else{
					that.getContentsList(false,that.type,that.id);
				}
			}
			if(res.type=="all"){
				that.getMetaList();
			}
		},
		methods:{
			totop() {
				// 返回顶部操作
				// #ifdef APP-PLUS
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				// #endif
				// #ifdef H5
			
				window.scrollTo({
					top: 0,
					behavior: 'smooth', // Optional: add smooth scrolling behavior
				});
				// #endif
			},
			allCache(){
				var that = this;
				var meta = that.TabCur;
			},
			getSet() {
				var that = this;
				uni.request({
					url: that.$API.SPset(),
					method: 'GET',
					dataType: "json",
					success(res) {
						that.actStyle = res.data.topStyle;
					},
					fail(error) {
						
					}
				})
			},
			tabSelect(e) {
				var that = this;
				that.TabCur = e.currentTarget.dataset.id;
				that.id = e.currentTarget.dataset.id;
				that.page = 1;
				that.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if(that.TabCur==0){
					that.getContentsList(false,"all",0);
				}else{
					that.getMetaContents(false,that.TabCur);
				}
			},
			handleWaterFallFinish() {
			  
			},
			topSelect(e){
				var that = this;
				that.orderCur = e.currentTarget.dataset.order;
				that.page = 1;
				if(that.type == "meta"){
					that.getMetaContents(false, that.id);
				} else {
					that.getContentsList(false,"all",0);
				}
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			loadMore(){
				var that = this;
				that.moreText = that.$t('global.loading');
				that.isLoad=1;
				if(that.type=="meta"){
					that.getMetaContents(true,that.id);
				}else if(that.type=="all"){
					if(that.id==0){
						that.getContentsList(true,that.type,that.id);
					}else{
						that.getMetaContents(true,that.id);
					}
				}else if(that.type=="top"){
					that.getContentsList(true,that.type,that.id);
				}else{
					that.getContentsList(true,that.type,that.id);
				}
			},
			getMetaList(){
				var that = this;
				var data = {
					"type":"category"
				}
				that.$Net.request({
					url: that.$API.getMetasList(),
					data:{
						"searchParams":JSON.stringify(that.$API.removeObjectEmptyKey(data)),
						"limit":15,
						"page":1,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						if(res.data.code==1){
							var list = res.data.data;
							if(list.length>0){
								that.metaList = that.metaList.concat(list);
							}
						}
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					},
					fail: function(res) {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					}
				})
			},
			getMetaInfo(id){
				var that = this;
				var metaType = "";
				if(that.type=="meta"){
					metaType="category";
				}else if(that.type=="tag"){
					metaType="tag";
				}
				var data = {
					"type":metaType,
					"mid":id
				}
				that.$Net.request({
					url: that.$API.getMetasList(),
					data:{
						"searchParams":JSON.stringify(that.$API.removeObjectEmptyKey(data)),
						"limit":1,
						"page":1,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						if(res.data.code==1){
							var list = res.data.data;
							if(list.length>0){
								that.metaInfo = list[0];
							}
						}
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					},
					fail: function(res) {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					}
				})
			},
			getContentsList(isPage,type,id){
				var that = this;
				var info = {
					"type":"post"
				}
				var order = "created";
				if(type=="user"){
					info = {
						"type":"post",
						"authorId":that.id
					}
				}
				if(that.type=="top"){
					order = that.orderCur
				}
				var page = that.page;
				if(isPage){
					page++;
				}else{
					that.contentsList = [];
				}
				var token = "";
				if(localStorage.getItem('userinfo')){
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token=userInfo.token;
				}
				var data = {
					"searchParams":JSON.stringify(that.$API.removeObjectEmptyKey(info)),
					"limit":15,
					"page":page,
					"order":order,
					"token":token
				};
				that.$Net.request({
					url: that.$API.getContentsList(),
					data:data,
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						that.moreText = that.$t('common.loadmoretxt');
						that.isLoad=0;
						if(res.data.code==1){
							var list = res.data.data;
							if(list.length>0){
								var num = res.data.data.length;
								var rand = Math.floor(Math.random()*num);
								var pushAdsInfo = null;
								// #ifdef APP-PLUS || H5
								if(that.isvip==0){
									if(localStorage.getItem('pushAds')){
										var pushAds = JSON.parse(localStorage.getItem('pushAds'));
										var adsNum = pushAds.length;
										if(adsNum>0){
											var adsRand = Math.floor(Math.random()*adsNum);
											pushAdsInfo = pushAds[adsRand];
											pushAdsInfo.isAds = 1;
										}
									}
								}
								// #endif
								var contentsList = [];
								//将自定义字段获取并添加到数据
								var curFields = that.$API.GetFields();
								for(var i in list){
									var fields = list[i].fields;
									if(fields.length>0){
										for(var j in fields){
											if(curFields.indexOf(fields[j].name)!=-1){
												list[i][fields[j].name]=fields[j].strValue;
											}
										}
									}
									contentsList.push(list[i]);
									// #ifdef APP-PLUS || H5
									var isAds = Math.round(Math.random());
									if(isAds==1){
										if(i==rand&&pushAdsInfo!=null){
											contentsList.push(pushAdsInfo);
										}
									}
									// #endif
								}
								if(isPage){
									that.page++;
									that.contentsList = that.contentsList.concat(contentsList);
								}else{
									that.contentsList = contentsList;
								}
							}else{
								that.moreText = that.$t('global.nomorearticle');
							}
						}
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					},
					fail: function(res) {
						that.moreText = that.$t('common.loadmoretxt');
						that.isLoad=0;
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					}
				})
			},
			getMetaContents(isPage,meta){
				var that = this;
				var data = {
					"mid":meta
				}
				var page = that.page;
				if(isPage){
					page++;
				} else {
					that.contentsList = [];
				}
				that.$Net.request({
					url: that.$API.getMetaContents(),
					data:{
						"searchParams":JSON.stringify(that.$API.removeObjectEmptyKey(data)),
						"limit":15,
						"page":page,
						"order":that.orderCur || "created"
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						that.isLoad=0;
						that.moreText = that.$t('common.loadmoretxt');
						if(res.data.code==1){
							var list = res.data.data;
							if(list.length>0){
								var contentsList = [];
								//将自定义字段获取并添加到数据
								var curFields = that.$API.GetFields();
								for(var i in list){
									var fields = list[i].fields;
									if(fields.length>0){
										for(var j in fields){
											if(curFields.indexOf(fields[j].name)!=-1){
												list[i][fields[j].name]=fields[j].strValue;
											}
										}
									}
									contentsList.push(list[i]);
								}
								if(isPage){
									that.page++;
									that.contentsList = that.contentsList.concat(contentsList);
								}else{
									that.contentsList = contentsList;
								}
								localStorage.setItem('contentsList_'+meta,JSON.stringify(that.contentsList));
							}else{
								that.moreText = that.$t('global.nomorearticle');
							}
						}
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					},
					fail: function(res) {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
						that.moreText = that.$t('common.loadmoretxt');
						that.isLoad=0;
					}
				})
			},
			toSearch(){
				uni.navigateTo({
				    url: '/pages/contents/search'
				});
			}
		}
	}
</script>

<style>
	.forum-post-btn-1 {
		position: fixed;
		z-index: 888;
		bottom: 200upx;
		right: 60upx;
		width: 90upx;
		height: 90upx;
		font-size: 40upx;
		color: #fff;
		border-radius: 50%;
		text-align: center;
		line-height: 90upx;
	}
	
	.forum-post-btn-2 {
		position: fixed;
		z-index: 888;
		bottom: 300upx;
		right: 60upx;
		width: 90upx;
		height: 90upx;
		font-size: 40upx;
		color: #fff;
		border-radius: 50%;
		text-align: center;
		line-height: 90upx;
	}
	.box-shadow-1 {
		box-shadow: 0 0 10upx #31C9E8bf;
	}
	.box-shadow-2 {
		box-shadow: 0 0 10upx #Ff9700bf;
	}

	/* 分类页面样式 */
	.category-header {
		position: relative;
		height: 400rpx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.category-header-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.header-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		z-index: 100;
	}

	.nav-action {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		backdrop-filter: blur(10rpx);
	}

	.nav-action text {
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.nav-title-meta {
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
	.nav-title-tag {
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
	.category-info {
		padding: 0 40rpx 60rpx 40rpx;
		color: #ffffff;
	}

	.category-name {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
	}

	.category-description {
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 24rpx;
		opacity: 0.9;
		text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.category-stats {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.stats-item {
		padding: 8rpx 20rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		font-size: 24rpx;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	/* 筛选选项卡样式 */
	.filter-tabs-container {
		background: #ffffff;
		padding: 20rpx 0 0 0;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		margin-top: -30rpx;
		position: relative;
		z-index: 10;
	}

	.filter-tabs {
		white-space: nowrap;
		padding: 0 30rpx 20rpx 30rpx;
	}

	.tn-tabs__item {
		display: inline-block;
		padding: 20rpx 32rpx;
		margin-right: 20rpx;
		border-radius: 50rpx;
		background: #f8f9fa;
		transition: all 0.3s ease;
		position: relative;
	}

	.tn-tabs__item--active {
		background: linear-gradient(135deg, #3cc9a4 0%, #42d4aa 100%);
		box-shadow: 0 4rpx 12rpx rgba(60, 201, 164, 0.3);
	}

	.tn-tabs__item-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #666;
		transition: color 0.3s ease;
	}

	.tn-tabs__item--active .tn-tabs__item-title {
		color: #ffffff;
		font-weight: 600;
	}

	/* 内容列表容器 */
	.content-list-container {
		background: #ffffff;
		padding: 0 30rpx 30rpx 30rpx;
		min-height: calc(100vh - 400rpx);
	}

	/* 响应式设计 */
	@media screen and (max-width: 750rpx) {
		.category-header {
			height: 350rpx;
		}
		
		.category-name {
			font-size: 42rpx;
		}
		
		.category-description {
			font-size: 26rpx;
		}
		
		.tn-tabs__item {
			padding: 16rpx 24rpx;
			margin-right: 16rpx;
		}
		
		.tn-tabs__item-title {
			font-size: 26rpx;
		}
	}
</style>
